<template>
  <!-- 图表容器，使用 ref 绑定 DOM 元素 -->
  <div ref="chartContainer" class="wordcloud-wrapper"></div>
</template>

<script setup lang="ts">
// 组合式 API 相关导入
import { ref, onMounted, onBeforeUnmount } from 'vue'
// ECharts 核心库
import * as echarts from 'echarts'
// ECharts 类型定义
import type { ECharts, EChartsOption } from 'echarts'
// 词云扩展插件
import 'echarts-wordcloud'

// ---------- 响应式变量声明 ----------
// 图表容器 DOM 引用，使用泛型指定元素类型
const chartContainer = ref<HTMLElement | null>(null)
// ECharts 实例引用，初始化为 null
let chartInstance: ECharts | null = null

// ---------- 词云数据 ----------
// 使用 ref 创建响应式数据，类型为包含 name 和 value 的对象数组
const cloudData = ref<Array<{ name: string; value: number }>>([
  { name: '前端工程师', value: 150 },
  { name: '数据可视化', value: 75 },
  { name: '大耳朵图图', value: 55 }
])

// ---------- 图表初始化方法 ----------
const initChart = () => {
  // 确保 DOM 元素已挂载
  if (!chartContainer.value) return

  // 清理旧实例（防止重复创建）
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }

  try {
    // 初始化 ECharts 实例
    chartInstance = echarts.init(chartContainer.value)

    // ---------- 图表配置项 ----------
    const option: EChartsOption = {
      series: [{
        type: 'wordCloud',  // 指定为词云类型
        data: cloudData.value,  // 绑定响应式数据
        shape: 'circle',  // 形状：circle | cardioid | diamond 等

        // ---------- 文字样式配置 ----------
        textStyle: {
          fontFamily: 'sans-serif',  // 字体
          fontWeight: 'bold',        // 加粗
          // 随机颜色生成函数
          color: () => {
            return `rgb(${[
              Math.round(Math.random() * 160),  // R 通道 (0-160)
              Math.round(Math.random() * 160),  // G 通道
              Math.round(Math.random() * 160)   // B 通道
            ].join(',')})`
          }
        },

        // ---------- 高亮样式配置 ----------
        emphasis: {
          focus: 'self',  // 高亮聚焦模式：'self' 只高亮当前词
          textStyle: {
            textShadowBlur: 10,          // 阴影模糊度
            textShadowColor: '#333'      // 阴影颜色
          }
        },

        // ---------- 其他布局参数 ----------
        gridSize: 10,          // 网格大小，决定词间距
        sizeRange: [12, 60],   // 字体大小范围 [最小, 最大]
        rotationRange: [-45, 45], // 旋转角度范围
        rotationStep: 45,      // 旋转角度步进值
        shuffle: false         // 是否每次渲染都打乱数据
      }]
    }

    // 应用配置到图表实例
    chartInstance.setOption(option)
  } catch (error) {
    console.error('图表初始化失败:', error)
  }
}

// ---------- 窗口缩放处理 ----------
const handleResize = () => {
  // 使用可选链操作符安全调用 resize 方法
  chartInstance?.resize()
}

// ---------- 生命周期钩子 ----------
// 组件挂载时
onMounted(() => {
  initChart()  // 初始化图表
  // 添加窗口缩放监听
  window.addEventListener('resize', handleResize)
})

// 组件卸载前
onBeforeUnmount(() => {
  // 移除窗口缩放监听
  window.removeEventListener('resize', handleResize)
  // 清理图表实例
  chartInstance?.dispose()
  chartInstance = null
})
</script>

<style lang="scss" scoped>
.wordcloud-wrapper {
  height: 400px;    /* 必须指定高度 */
  width: 100%;      /* 宽度自适应容器 */
  min-width: 300px; /* 最小宽度保证显示 */
  background: #fff; /* 建议设置背景色 */

  /* 可选：添加过渡效果 */
  transition: height 0.3s ease;
}
</style>